<template>
  <div class="layout">
    <div class="menu" width="auto">
      <div class="title" width="auto">
      </div>
      <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :collapse="menu.isCollapse"
              >
              <Menu :menulist="menuStore.menulist"></Menu>
              </el-menu>
    </div>
    <div class="main">
        <div class="header">
            <Header></Header>
        </div>
        <div class="content">
          <el-breadcrumb :separator-icon="ArrowRight" style="margin:20px 0 30px 0" >
            <el-breadcrumb-item  
          :to="{ path: '/welcome' }">首页</el-breadcrumb-item>

        <el-breadcrumb-item v-for="item in userStore.breadCrumbList" :key="item.meta.key" 
        :to="{ path: item.path }">{{ item.meta.title}}</el-breadcrumb-item>
      </el-breadcrumb>
            <router-view></router-view>
        </div>
    </div>
    
</div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import Menu from '../../components/menu/index.vue'
import Header from '../../components/header/index.vue'
import usemenuList from '../../store/menulist.js'
import useMenu from '../../store/menu.js'
import useUserStore  from '@/store/user.js'
let userStore = useUserStore()
let menu = useMenu()
let menuStore = usemenuList()

</script>

<style scoped>
/* .collapsed{
  width: 63.33px !important;
  transition: all 0.2s linear;
}
.nocollapsed{
  width: 200px !important;
  transition: all 0.001s linear;
} */
*{
  margin: 0;
  padding: 0;
}
html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.layout{
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
}
.main{
    flex: 1;
    width: 1px;
}
.header{
  height: 50px;
  /* overflow: hidden; */
  /* background-color: black; */
  background: #232526;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}
.content{
  flex: 1;
  padding: 10px;
  height: calc(100% - 50px);
  overflow-y: scroll;
  background-color: #fdfcfc;
}
.title{
    min-height: 50px;
    background-image: url(https://leader.yaetong.com/assets/img/logo_header.d0abe37e.png);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 50%;
    /* background-color: rgb(57, 103, 145); */
    /* background-color: skyblue;   */
    /* background: #232526; */
background-color: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
background-color: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */




}
.menu{
  background: #232526;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* :deep(.el-menu-item){
 padding-right: 60px;
} */
/* :deep(.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title, .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title ){
  padding-left:20px;
} */


</style>

